<template>
    <template v-for="item in menuList" :key="item.path">
        <!-- 如果当前元素有子菜单 -->
        <el-sub-menu v-if="item.children.length != 0" :index="'/home/' + item.path">
            <template #title>
                <ItemIcon :icon="item.name"></ItemIcon>
                <span>{{ item.name }}</span>
            </template>
            <!-- 子菜单，又分为有下级菜单和没有下级菜单的 -->
            <!-- 子菜单，递归遍历 -->
            <MenuItem :menuList="item.children"></MenuItem>
        </el-sub-menu>
        <!-- 如果当前元素没有子菜单 -->
        <el-menu-item v-else :index="'/home/' + item.path">
            <ItemIcon :icon="item.name"></ItemIcon>
            <span>{{ item.name }}</span>
        </el-menu-item>
    </template>
</template>

<script setup>
import ItemIcon from '@/components/home/menu/ItemIcon.vue'
import { defineProps } from 'vue'

const props = defineProps({'menuList': Array})

</script>

<style scoped>

</style>